<template>
  <div class="ad-wrap" v-loading = 'loading'>
    <div class="ad-banner">
      <!-- <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802360540,2576557860&fm=26&gp=0.jpg" alt=""> -->
      <img :src="adBanner.imageUrl" alt="">
    </div>
    <div class="ad-list">
      <div class="ad-item" v-for="(item, index) in goodsList" :key="index">
        <hotGoodsItem :item="item" :index="index" />
      </div>
    </div>
      <!-- 分页 -->
    <div class="pagination" v-show = "total > 0">
      <el-pagination
        background
        :current-page = "pageNum"
        @current-change="changeCurrentPage"
        :page-sizes="[200]"
        @size-change="changeCurrentPageSize"
        :total = "total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <div class="pageSearch" @click="pageSearch">确定</div>
    </div>
  </div>
</template>
<script>
import hotGoodsItem from '~/components/hotGoodsItem.vue' // 商品
export default {
  async fetch({store}) {
    // await store.commit('setInterIndex', 0)
  },
  layout: 'internalouts',
  mounted() {
    // this.initKline()
  },
  components: {
    hotGoodsItem
  },
  data() {
    return {
      goodsList: [],
      adBanner:{},
      pageNum:1, //第一页
      pageSize:200, //每页的条数
      total:0, //总条数
      loading:false, //页面的加载效果
    }
  },
  methods: {
    changeCurrentPage(page){ //改变当前页数
      this.pageNum = page; //赋值给当前页
      this.activityDetail(); //调用商品列表接口
      this.$scrollTo();
    },
    changeCurrentPageSize(pageSize){ //改变条数
      this.pageNum = 1; //重新请求第一页
      this.pageSize = pageSize;  //设置条数
      this.activityDetail();//调用商品列表接口
      this.$scrollTo();
    },
    pageSearch(){ //点击确定按钮时候调用分页事件
      this.activityDetail();//调用商品列表接口
      this.$scrollTo();
    },
    activityDetail(){
      this.loading = true;
      let activityId = this.$route.query.id;
      let params=({
        activityId,
        pageNum:this.pageNum,
        pageSize:this.pageSize,
      })
      this.$axios.$post('activityDetail',params).then(res => {
        this.loading = false;
        if(res.status === 200 ){
          this.goodsList = res.obj.goodsList.list;
          this.adBanner = res.obj.activity;
          this.total = res.obj.goodsList.total; //总的条数
        }else{
          this.$message.warning(res.msg)
         }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    }
  },
  mounted(){
    this.activityDetail()
  }
}
</script>

<style scoped>
  .ad-wrap {
    width: 1200px;
    margin: 0 auto;
    overflow:hidden;
  }
  .ad-list {
    margin-top: 15px;
    display: flex;
    width: 1242px;
    flex-wrap: wrap;
  }
  .ad-list .ad-item {
    margin-right: 16px;
    margin-bottom: 13px;
  }
  .ad-banner {
    width: 1200px;
    margin: 20px auto 0 auto;
  }
  .ad-banner img {
    width: 100%;
    height: 430px;
  }
  .pagination{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:0 0 50px 0;
  }
  .pagination .pageSearch{
    width:60px;
    height:28px;
    line-height:28px;
    text-align:center;
    border-radius:15px;
    background:#0096e6;
    color:#ffffff;
    font-size:14px;
    cursor:pointer;
    margin-left:10px;
    user-select:none;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
    background-color:#0096e6;
  }
</style>
